<script setup>
import { ref, watch } from 'vue'
import { updateDoctorInfoService } from '@/api/doctor'
import DoctorClassifySelect from '@/components/select/DoctorClassifySelect.vue'

// 显示抽屉
const visibleDrawer = ref(false)

// 表单数据
// 患者信息
const doctorInfo = ref({})

// 绑定表单
const formRef = ref(null)

// 定义通知父组件的方法
const emit = defineEmits(['refresh'])

/**
 * 提交表单
 */
const submit = async () => {
  await updateDoctorInfoService(doctorInfo.value)
  // 关闭抽屉
  visibleDrawer.value = false
  ElMessage.success('修改成功')
  // 清空表单
  formRef.value.resetFields()
  // 通知父组件刷新页面
  emit('refresh')
}

// vue3如果抽屉关闭, 则清空表单
watch(visibleDrawer, (val) => {
  if (!val) {
    formRef.value.resetFields()
  }
})

// 打开抽屉
const open = async (row) => {
  // 赋值表单数据
  visibleDrawer.value = true
  doctorInfo.value = row
  // 将 doctorInfo 的 gender 和 occupation 转换为字符串, 使用toString()方法
  doctorInfo.value.gender =
    doctorInfo.value.gender.toString()
}

// 向父组件暴露open
defineExpose({
  open
})
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    direction="rtl"
    size="30%"
    :append-to-body="true"
  >
    <template v-slot:title>
      <el-text
        class="mx-1"
        type=""
        size="large"
        :strong="true"
      >
        修改医生信息
      </el-text>
    </template>

    <!-- 表单 -->
    <el-form
      size="large"
      label-width="100px"
      :model="doctorInfo"
      ref="formRef"
    >
      <!-- 姓名 -->
      <el-form-item label="姓名:">
        <el-input
          v-model="doctorInfo.name"
          placeholder="请输入医生姓名"
        ></el-input>
      </el-form-item>

      <!-- 医生类型 -->
      <el-form-item label="医生类型:">
        <DoctorClassifySelect
          v-model="doctorInfo.classifyId"
        ></DoctorClassifySelect>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别:">
        <div class="mb-2 flex items-center text-sm">
          <el-radio-group
            v-model="doctorInfo.gender"
            class="ml-4"
          >
            <el-radio value="1" size="large">男</el-radio>
            <el-radio value="0" size="large">女</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>

      <!-- 年龄 -->
      <el-form-item label="年龄:">
        <el-input
          v-model="doctorInfo.age"
          placeholder="请输入医生年龄"
        ></el-input>
      </el-form-item>

      <!-- 电话号码 -->
      <el-form-item label="电话号码:">
        <el-input
          v-model="doctorInfo.phone"
          placeholder="请输入医生电话号码"
        ></el-input>
      </el-form-item>

      <!-- 个人简介 -->
      <el-form-item label="个人简介:">
        <el-input
          style="width: 300px"
          maxlength="600"
          placeholder="请输入个人简介"
          show-word-limit
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10 }"
          v-model="doctorInfo.profile"
        />
      </el-form-item>
      <!-- 专业特长 -->
      <el-form-item label="专业特长:">
        <el-input
          style="width: 300px"
          maxlength="300"
          placeholder="请输入专业特长"
          show-word-limit
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10 }"
          v-model="doctorInfo.profession"
        />
      </el-form-item>

      <!-- 创建时间 -->
      <el-form-item label="出生日期:">
        <el-date-picker
          disabled
          v-model="doctorInfo.createTime"
          type="date"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <div class="button-group">
      <el-button type="primary" @click="submit">
        确认
      </el-button>
      <el-button @click="visibleDrawer = false">
        取消
      </el-button>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
// 设置输入框的宽度
.el-input {
  width: 60%;
}

// 设置按钮的样式
.button-group {
  // 距离上面20px
  margin-top: 30px;
  // 左一点的位置
  margin-left: 100px;
  // 设置按钮间距
  button {
    margin-right: 20px;
  }
}
</style>
